"クラスメソッドのReact事情大公開スペシャル#6"を開催しました!

"クラスメソッドのReact事情大公開スペシャル#6"を開催しました!

第6回は初心者の方も理解しやすい回でした。オンライン配信はYouTubeで公開してます。
Clock Icon2025.01.21

みなさんあけましておめでとうございます🎍
リテールアプリ共創部マッハチームのmorimorikochanです

2025年1月15日にクラスメソッドのReact事情大公開スペシャル#6を大阪オフィス+オンラインで開催いたしました。
前回に引き続き開催レポートを残したいと思います。

イベント概要

イベント名 クラスメソッドのReact事情大公開スペシャル#6
日時 2025/01/15 19:00〜
場所 クラスメソッド大阪オフィス + YouTubeLiveによるオンライン配信
現地参加者 15名
オンライン参加者 61名

https://classmethod.connpass.com/event/333632/

5回目となる今回は、6名の方にご登壇いただき現地参加オンライン参加合わせて77名の方にご参加いただきました👏
今回からは Xのハッシュタグ#cm_reactのタイムラインをYouTubeに埋め込んで、ライブ感を演出してみました。特にトラブルなく動作していたようで何よりです

アーカイブ配信

https://www.youtube.com/watch?v=wyV2EqLbpjk

開催の様子

mosaic_20250120193238
登壇の様子 その1

mosaic_20250120193201
登壇の様子 その2

mosaic_20250120193525
懇親会の様子 その1

mosaic_20250120193134
懇親会の様子 その2

登壇内容

登壇内容を紹介していきます。

1. React Contextの状態管理について考える

はじめに、クラスメソッドAWS事業本部コンサルティング部の"神野 雄大"さんに発表いただきました。

React状態管理の手法の紹介およびReact Contextの設計を見直してみませんか?、という感じの発表でした。
彼は基本的にソリューションアーキテクトとしてお仕事していますが、アプリケーション開発の経験値がめちゃくちゃあるので、propsのバケツリレーやContextHellなどやたら現場で出てくる解像度の高いあるあるがいっぱい詰まっていて面白かったです。

2. Reactのいいなと思ったところ

つづいて、Natsukiさんに発表いただきました。

Reactを学ぶためにVSCodeの拡張機能を作ったそうです。
学習スタイルが一石二鳥でお得ですよね、めっちゃわかります。

dangerouslySetInnerHTMLに注目してVue.jsと比較するのは面白かったです。
あと最後のメッセージは自分にも刺さるものがありました。。
自分の中で使ってるツール・ライブラリに対して優劣をつけてしまう心理は正直あるとは思いますが、パブリックや不特定多数の人がいる場で主張することは避けないといけないと思います。
どんなツールやライブラリでも作者がいて利用者がいて成り立っているので。そういう人たちへの思いやりみたいなものを持ちたいですよね

3. 初めてのuseSyncExternalStore

株式会社GemcookのKantarouさんに発表いただきました、
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://youtu.be/wyV2EqLbpjk?feature=shared&t=1467

Gemcookさんが用意するスライド、いつもスペーシング綺麗だなぁと思ってます。
useSyncExternalStore、僕はLocalStorageの値を触る時によく使われてるイメージがありましたが、ウインドウ幅の変化を扱うケースを例に出していて地味に勉強になりました。
useState+useEffectで代替できてしまうので使うこと忘れてしまいがちですが、気をつけていきたいですね

4. 今更ながらReact Server Componentsに入門する

猫屋敷さんに発表いただきました。
現時点で資料はアップロードされていませんが、YouTubeのアーカイブが以下から閲覧可能となっています。

https://youtu.be/wyV2EqLbpjk?feature=shared&t=1972

Next.jsとReactの歴史が紹介されていましたが、VerselとReactチームの関係性ってめちゃくちゃ深いんだろうなぁと思いました。
特定の技術がベンダーにロックインされるのは人によって採用しづらさを感じますよね。。
というかReact19もうリリースされてたんですね!僕の周りではあんまり話題になってないような気がする

5. 画像をサスペンドするというアイデア

KoharaKazuyaさんに発表いただきました。

https://koharakazuya.github.io/slides/20250115-classmethod-react/suspense-image.html

途中、弊社のコーポレートサイトが出てきて(画像が読み込まれてない状態で)、一瞬焦りました笑
本題とは少し関係ないですが、Promise.race()を使ってタイムアウトの制御を実現しているのが新鮮でした。まだまだ精進が足りません...

6. Reactフレームワークプロダクトをモバイルアプリにして、もっと便利に

Masahiko Sakakibaraさんに発表いただきました。

ネイティブアプリの必要性や多機能性を踏まえて、Capacitorを使ってNext.jsをモバイルアプリにする方法を紹介されていました。
Capacitorを使えばReactエンジニアでもモバイルアプリが簡単につくれてすごいですね。僕はCordovaしか触ったことないですがCordovaより管理しやすいかもなーと感じました。

懇親会

登壇後に懇親会を開催しました。
あの会社のいろんな開発事情やNext.jsのAppRouterのお悩みなど色々な話を聞くことができました。
まだまだ現地参加の人数を増やしていきたいと思っているので引き続き頑張っていきたいと思ってます💪

ハッシュタグ

今回もいくつか面白かったツイート貼っておきます

フル参加すごい...
https://x.com/Ryuki_4648/status/1879532056482554163

https://x.com/180wani/status/1879470231720284488

https://x.com/yKicchan/status/1879471043754303639

https://x.com/hmatsu47/status/1879472878661587165

https://x.com/yKicchan/status/1879473756101652833

https://x.com/rdlabo/status/1879474913146441891

https://x.com/yKicchan/status/1879480939551789126

https://x.com/natch_engr/status/1879487912074674319

所感

おかげさまで#6が無事に開催できました👏
運営をお手伝いいただいた皆様、登壇を承諾していただいた皆様ありがとうございました。
次回も(登壇者が見つかれば)やっていきます🔥

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.